<template>
  <el-container>
    <el-main>
      <!--  功能按钮组 start  -->
      <el-header height="42px">
        <el-button-group class="ik-list-menu">
          <!-- 编辑模式  add - 新增模式, edit - 编辑模式, details - 详情模式 -->
          <el-button
            v-if="pageData.mode === 'edit' || pageData.mode === 'details'"
            class="ik-list-menu-btn"
            size="medium"
            @click="infoCreateBtn"
          >新增
          </el-button>
          <el-button
            v-if="pageData.mode === 'details'"
            class="ik-list-menu-btn"
            size="medium"
            @click="infoUpdateBtn"
          >修改
          </el-button>
          <el-button
            v-if="pageData.mode === 'edit' || pageData.mode === 'details'"
            class="ik-list-menu-btn"
            size="medium"
            @click="infoCopyBtn"
          >复制
          </el-button>
          <el-button
            v-if="pageData.mode === 'edit'"
            class="ik-list-menu-btn"
            size="medium"
            @click="infoDetailsBtn"
          >详情
          </el-button>
          <el-button
            v-if="pageData.mode === 'add' || pageData.mode === 'edit'"
            class="ik-list-menu-btn"
            size="medium"
            @click="infoSaveBtn"
          >
            保存
          </el-button>
          <el-button class="ik-list-menu-btn" size="medium" @click="infoCancelBtn">取消</el-button>
        </el-button-group>
      </el-header>
      <!--  功能按钮组 end  -->
      <div v-loading="loading" class="flex flex-col p-10">
        <!--    主表表单    -->
        <ik-h-info ref="hInfo" :mode="pageData.mode" />
        <!--    子表表格    -->
        <ik-d-table ref="dTable" />
      </div>
    </el-main>
  </el-container>
</template>
<script>

import { getById, save, update } from '@/api/ik/data/dataApi'

export default {
  name: "IkHDInfoPage",
  data() {
    return {
      loading: false
    }
  },
  inject: ["pageData"],
  created() {
    const id = this.$route.query.id || 0
    if (id !== 0) {
      this.getInfo(id)
    }
  },
  methods: {
    /**
     * 信息页创建按钮点击
     */
    infoCreateBtn() {
      this.$router.push({ path: '/business/manager/' + this.pageData.webPath + '/info/add' })
    },
    /**
     * 信息页编辑按钮点击
     */
    infoUpdateBtn() {
      this.pageData.mode = "edit"
    },
    /**
     * 复制按钮点击事件
     */
    infoCopyBtn() {
      // 修改id为控制
      this.$refs.hInfo.formData.id = 0
      // 修改为编辑模式
      this.pageData.mode = "edit"
    },
    /**
     * 详情按钮被点击
     */
    infoDetailsBtn() {
      // 修改为编辑模式
      this.pageData.mode = "details"
      // this.getInfo(this.pageData.formData.head.id)
    },
    /**
     * 保存按钮点击事件
     */
    infoSaveBtn() {
      this.saveAndUpdateData()
    },
    /**
     * 保存数据
     */
    saveAndUpdateData() {
      const api = this.pageData.formData.head.id ? update : save
      this.$refs.hInfo.validateFormData(validate => {
        if (validate) {
          this.loading = true
          console.log("formData", this.pageData.formData)
          api(this.pageData.bgPath, this.pageData.formData).then(res => {
            this.getInfo(res.data)
            this.$message.success("数据库已保存")
            this.pageData.mode = "details"
          })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    /**
     * 获取记录详情
     * @param id
     */
    getInfo(id) {
      this.loading = true
      getById(this.pageData.bgPath, id).then(res => {
        const formData = { ...res.data }
        // 初始化子表数据
        this.pageData.dTableConfig.forEach(item => {
          formData.body[item.key] = formData.body[item.key] || []
        })
        this.pageData.formData = formData
      })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 取消按钮点击事件
     */
    infoCancelBtn() {
      const path = '/business/manager/' + this.pageData.webPath + '/list/list'
      this.$router.push({ path })
    },
    /**
     * 更新表单数据
     * @param formData
     */
    updateFormData(formData) {
      this.$refs.hInfo.updateFormData(formData)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
